<template>
	<view class="chat-page">
		<!-- 1. 顶部导航栏 -->
		<!-- <view class="chat-header">
			<view class="left-actions">
				<uni-icons type="left" size="24" @click="goBack"></uni-icons>
				<view class="unread-count" v-if="chatInfo.unreadCount > 0">{{ chatInfo.unreadCount }}</view>
			</view>
			<view class="chat-title-section">
				<text class="chat-title">{{ chatInfo.name }}</text>
				<text class="chat-subtitle" v-if="chatInfo.subtitle">{{ chatInfo.subtitle }}</text>
			</view>
			<view class="right-actions">
				<button v-if="chatInfo.showBuyButton" class="buy-button" size="mini" @click="buyNow">立即租用</button>
			</view>
		</view> -->

		<!-- 可选的商品/订单信息卡片 (只在特定聊天中显示) -->
		<view class="product-info-card">
			<image class="product-image" v-show="chatInfo?.images" :src="app.globalData.Util.getFirstImageUrl(chatInfo?.images)" mode="aspectFill"></image>
			<view class="product-details">
				<view class="product-price">
					<text class="price-symbol">¥</text>
					<text class="price-value">{{ chatInfo?.price }}</text>
					<view class="product-details">
						<text class="discount-tag" v-if="chatInfo?.discountText">{{ chatInfo?.discountText }}</text>
					</view>
				</view>
				<text class="product-shipping">
					{{ chatInfo?.isFreeShipping == 0 ? `含运费${chatInfo?.shippingFee}元` : '包邮'}}
				</text>
				<text class="product-location">{{ chatInfo?.location || '未知地址' }}</text>
			</view>
			<!-- 租用按钮 -->
			<view class="product-details">
				<view class="right-actions">
				<!-- 根据需要添加，例如 "..." 更多按钮或截图中的 "立即租用" -->
					<button v-if="showBuyButton" class="buy-button" size="mini" @click="buyNow">立即租用</button>
					<!-- <uni-icons type="more-filled" size="24" color="#333" @click="showMoreOptions"></uni-icons> -->
				</view>
			</view>
		</view>

		<!-- 2. 聊天消息区域 -->
		<scroll-view
			class="message-list"
			scroll-y
			:scroll-top="scrollTop"
			:scroll-with-animation="true"
			@scrolltoupper="loadMoreMessages"
			:style="{ height: scrollViewHeight + 'px' }"
		>
			<!-- 加载更多提示 -->
			<view class="loading-more" v-if="isLoadingMore">加载中...</view>
			
			<view v-for="(msg) in messages" :key="msg.id" class="message-item-wrapper">
				<!-- 系统消息或时间戳 -->
				<view v-if="msg.type === 'system' || msg.type === 'time'" class="system-message">
					{{ msg.content }}
				</view>

				<!-- 用户消息 -->
				<view v-else class="message-item" :class="[msg.type === 'sent' ? 'sent' : 'received']">
					<image v-if="msg.type === 'received'" class="avatar" :src="receiver.receiverPhoto" mode="aspectFill"></image>
					<!-- <image v-if="msg.type === 'received' && !msg.avatar" class="avatar" :src="this.chatInfo.product.seller.sellerAvatar" mode="aspectFill"></image> -->
					<view class="message-content">
						<view class="message-bubble" :class="[msg.type === 'sent' ? 'sent-bubble' : 'received-bubble']">
							<!-- 图片消息 (示例) -->
							<image v-if="msg.contentType === 'image'" :src="msg.content" class="message-image" mode="widthFix" @click="previewImage(msg.content)"></image>
							<!-- 纯文本消息 -->
							<text v-else-if="msg.contentType === 'message'">{{ msg.content }}</text>
							<view v-else class="message-image" @click="previewOrder(JSON.parse(msg.content).id)">
								<view v-if="msg.contentType === 'orderStart'">我已下单</view>
								<view v-if="msg.contentType === 'orderCancel'">我已取消订单</view>
								<view v-if="msg.contentType === 'orderPay'">我已付款</view>
								<view v-if="msg.contentType === 'orderShipped'">已发货</view>
								<view v-if="msg.contentType === 'orderCompleted'">已收货</view>
								
								<button class="buy-now-btn">查看</button>
							</view>
						</view>
						<!-- <text v-if="msg.type === 'sent' && msg.status" class="message-status">{{ msg.status }}</text> -->
					</view>
					<image v-if="msg.type === 'sent'" class="avatar" :src="myAvatar" mode="aspectFill"></image>
				</view>
			</view>
			<view id="bottom-anchor"></view> <!-- 用于滚动到底部的锚点 -->
		</scroll-view>

		<!-- 3. 底部输入区域 -->
		<view class="chat-input-area" :style="{ paddingBottom: safeAreaInsetsBottom + 'px' }">
			<input
				class="text-input"
				type="text"
				v-model="inputText"
				placeholder="想跟TA说点什么..."
				confirm-type="send"
				@confirm="sendMessage"
				:adjust-position="false"
				@focus="onInputFocus"
				@blur="onInputBlur"
			/>
			<uni-icons class="input-icon" type="paperplane" size="28" color="#555" v-if="showSendButton" @click="sendMessage"></uni-icons>
			<!-- <uni-icons class="input-icon" type="mic" size="28" color="#555" @click="handleVoiceInput"></uni-icons> -->
		</view>

		<!-- 4. 租用确认抽屉 -->
		<uni-popup ref="purchaseDrawer" type="bottom" background-color="#fff" @change="onDrawerChange">
			<view class="purchase-drawer-content">
				<view class="drawer-header">
					<view class="seller-credit-tag">
						<image src="/static/icon_good_credit.png" class="credit-icon" mode="widthFix"></image> <!-- 替换为实际图标 -->
						卖家信用极好
					</view>
					<uni-icons type="closeempty" size="24" color="#999" @click="closePurchaseDrawer"></uni-icons>
				</view>

				<view class="drawer-product-info">
					<image class="drawer-product-image" :src="app.globalData.Util.getFirstImageUrl(chatInfo?.images) || defaultProductImg" mode="aspectFill"></image> <!-- 使用聊天对象的头像作为备用 -->
					<view class="drawer-product-details">
						<text class="drawer-product-name">{{ chatInfo?.title || '标题加载中' }}</text>
						<text class="drawer-product-price">¥{{ chatInfo?.price || '加载中' }}</text>
					</view>
				</view>

				<view class="drawer-address-section" v-if="!currentAddress || !currentAddress.name" @click="selectAddress">
					<!-- 如果没有默认地址,则需要先添加地址 -->
					 <view class="address-item">
						<view class="address-details">
							<text class="address-text">
								请先添加地址
							</text>
						</view>
					</view>
				</view>
				<view class="drawer-address-section" v-if="currentAddress" @click="selectAddress">
					<uni-icons type="location" size="20" color="#666" class="location-icon"></uni-icons>
					<view class="address-details">
						<text class="address-text">{{ currentAddress.province }} - {{ currentAddress.city }} - {{ currentAddress.district }}</text>
						<text class="address-text">{{ currentAddress.detailAddress }}</text>
						<text class="address-contact">{{ currentAddress.name }} {{ currentAddress.phone }}</text>
					</view>
					<uni-icons type="right" size="16" color="#C0C4CC"></uni-icons>
				</view>
				<view class="drawer-shipping-section">
					<text class="shipping-label">运费</text>
					<text class="shipping-value" v-if="chatInfo?.isFreeShipping == 1">包邮</text>
					<text class="shipping-value" v-else>￥{{ chatInfo?.shippingFee }}</text>
				</view>
				<view class="drawer-bottom-bar">
					<view class="bottom-tip-banner">
						<text>出租方好评率100%，喜欢就抓紧下单吧 ~</text>
						<image src="/static/fish_character_yellow.png" class="tip-fish" mode="heightFix"></image> <!-- 替换为黄色小鱼图标 -->
					</view>
					<button class="confirm-purchase-btn" @click="confirmPurchase">
						确认租用 ¥{{ chatInfo?.price || '加载中' }}
					</button>
					<view class="safe-area-placeholder" :style="{ height: safeAreaInsetsBottom + 'px' }"></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
const app = getApp()
export default {
	computed:{
		app() {
			return app
		}
	},
	data() {
		return {
			timer: null,
			defaultAvatar: 'https://preview.qiantucdn.com/58pic/33/88/57/58PIC58PICV58PICVrK2KvJ7eUeB58PIC_PIC2018.png!qt_h320',
			defaultProductImg: '/static/image/loading.png',
			productId: '',
			receiverId: '',
			receiver: {
				receiverPhoto: '',
				receiverName: '',
			},
			sender: {
				senderPhoto: '',
				senderName: ''
			},
			chatInfo: {},
			myAvatar: '/static/my_avatar_placeholder.png', // 替换为当前用户头像
			messages: [],
			inputText: '',
			scrollTop: 0,
			scrollViewHeight: 0, // 动态计算 scroll-view 高度
			isLoadingMore: false,
			safeAreaInsetsBottom: 0, // 底部安全区域
			showSendButton: false, // 是否显示发送按钮而不是表情按钮
			isInputFocused: false,
			addressId: '',
			selectedAddress: null, // 用于存储选中的地址
			currentAddress: { // 模拟当前选中地址
			},
		};
	},
	async onShow(){
		this.showBuyButton = true
		this.receiver = uni.getStorageSync('receiver')		
		await this.loadProductDetail();
		this.loadInitialMessages(); // 加载初始消息
		// 获取底部安全区域高度
		const { safeAreaInsets } = uni.getSystemInfoSync();
		if (safeAreaInsets) {
			this.safeAreaInsetsBottom = safeAreaInsets.bottom;
		}
		// 定时获取消息
		this.timer = setInterval(() => {
			this.loadMoreMessages();
		}, 1000);
	},
	onUnload() {
		if(this.timer) {  
			clearTimeout(this.timer);
			this.timer = null;
		}

		// 页面卸载时移除监听，防止内存泄漏
        uni.$off('selectedAddress');
	},
	onHide(){
		if(this.timer) {  
			clearTimeout(this.timer);
			this.timer = null;
		}
	},
	async onLoad(options) {
		// 示例：根据 chatId 切换不同聊天对象信息
		// if (options.chatType === 'type2') {
		// 	this.chatInfo = {};
		// }
		let userInfo = uni.getStorageSync('userInfo')
		if(uni.getStorageSync('userInfo')){
			this.currentAddress = userInfo.defaultAddress
			this.myAvatar = userInfo.photo
		}

		if(!options.productId){
			uni.showToast({
                title: `获取信息失败`,
                icon: 'none'
            });
			uni.navigateBack();
		}
		if(options.receiverId){
			this.receiverId = options.receiverId
		}
		this.productId = options.productId
		
		// 页面加载时监听事件
        uni.$on('selectedAddress', (address) => {
            console.log('Received selected address:', address);
            // 你可以在这里执行其他操作，例如更新页面显示或提交订单
            uni.showToast({
                title: `已选择地址：${address.name}`,
                icon: 'none'
            });
			this.$nextTick(() => {
				this.currentAddress = address;  // 重新赋值触发响应式更新
			});
        });
	},
	onReady() {
		this.calculateScrollViewHeight();
		this.scrollToBottom(false); // 初始滚动到底部，不带动画
		
		// 监听键盘高度变化，以调整scroll-view高度 (如果adjust-position=false导致问题)
		// uni.onKeyboardHeightChange(res => {
		//   console.log('键盘高度变化', res.height)
		//   this.keyboardHeight = res.height;
		//   this.calculateScrollViewHeight();
		//   if (res.height > 0) {
		// 	this.$nextTick(() => this.scrollToBottom(true)); // 键盘弹起滚动到底部
		//   }
		// })
	},
	watch: {
		inputText(newVal) {
			this.showSendButton = newVal.trim().length > 0;
		}
	},
	methods: {
		async loadProductDetail() {
			app.globalData.Request.get(app.globalData.ApiConstant.Product.detail + '/' + this.productId,{}).then(res => {
				if(res.success){
					this.chatInfo = res.data
					uni.setNavigationBarTitle({ // 通常聊天页会隐藏默认导航栏，使用自定义的
						title: this.chatInfo.seller.sellerName
					});
					if(this.chatInfo?.imageUrls){
						if(!this.chatInfo.images){
							this.chatInfo.images = []
						}
						this.chatInfo?.imageUrls.split(',').forEach(item => {
							this.chatInfo?.images.push(item)
						})
					}
				}
			})
		},
		getSellerInfo(){
			app.globalData.Request.post(app.globalData.ApiConstant.User.seller, {sellerId: this.product.userId}).then((res)=>{
				this.sellerInfo = res.data
			})
		},
		calculateScrollViewHeight() {
			const systemInfo = uni.getSystemInfoSync();
			const windowHeight = systemInfo.windowHeight;
			
			let headerHeight = 0;
			let productCardHeight = 0;
			let inputAreaHeight = 0;

			const query = uni.createSelectorQuery().in(this);
			query.select('.chat-header').boundingClientRect(data => {
				if (data) headerHeight = data.height;
			}).exec(() => { // 确保第一个查询完成后再执行后续
				query.select('.product-info-card').boundingClientRect(data => {
					if (data) productCardHeight = data.height;
				}).exec(() => {
					query.select('.chat-input-area').boundingClientRect(data => {
						if (data) inputAreaHeight = data.height;
						
						this.scrollViewHeight = windowHeight - headerHeight - productCardHeight - inputAreaHeight;
						// console.log(`Window: ${windowHeight}, Header: ${headerHeight}, Product: ${productCardHeight}, Input: ${inputAreaHeight}, ScrollView: ${this.scrollViewHeight}`);
					}).exec();
				});
			});
		},
		goBack() {
			uni.navigateBack();
		},
		loadInitialMessages() {
			app.globalData.Request.post(app.globalData.ApiConstant.Message.getMyHistoryReadMessage, {
				productId: parseInt(this.productId),
				current: 1,
				limit: 10
			},{showLoad : false}).then((res)=>{
				if(res?.data?.records){
					this.messages = this.convertMessage(res.data.records);
				}
			})
			// 模拟加载消息
			setTimeout(() => {
				this.$nextTick(() => {
					this.scrollToBottom(false);
				});
			}, 300);
		},
		loadMoreMessages() {
			app.globalData.Request.post(app.globalData.ApiConstant.Message.getMyNewestMessage, {
				productId: parseInt(this.productId)
			},{showLoad : false}).then((res)=>{
				if(res?.data?.length>0){
					this.messages = [...this.messages, ...this.convertMessage(res.data)]

					for(let item of this.messages){
						if(item.type === 'order' && item.content){
							item.content = JSON.parse(item.content)
						}
					}
				}
			})
		},
		// 转换
		convertMessage(items) {
			if(!items) return [];
			return items.map(item => {
				item.type = item.senderId === uni.getStorageSync('userInfo').userId ? 'sent': 'received';
				item.status = (item.isRead === 1) ? '已读' : '未读';
				return item;
			})
		},
		sendMessage() {
			if (this.inputText.trim() === '') {
				uni.showToast({ title: '不能发送空消息', icon: 'none' });
				return;
			}
			const newMessage = {
				id: Date.now(), // 简单唯一ID
				type: 'sent',
				content: this.inputText,
				status: '发送中', // 初始状态
				contentType: 'message'
			};
			app.globalData.Request.post(app.globalData.ApiConstant.Message.sendMessage, {
				content: this.inputText,
				productId: parseInt(this.productId),
				receiverId: this.receiverId,
			},{showLoad : false}).then(res => {

			});
			this.messages.push(newMessage);
			this.inputText = '';
			this.$nextTick(() => {
				this.scrollToBottom(true);
				// 模拟发送成功后更新状态
				setTimeout(() => {
					const msgIndex = this.messages.findIndex(m => m.id === newMessage.id);
					if (msgIndex > -1) {
						this.messages[msgIndex].status = '已读'; // 或 '送达'
					}
				}, 1000);
			});
		},
		scrollToBottom(animated = true) {
			// console.log('Scrolling to bottom');
			// 滚动到特定元素的方法在某些情况下更可靠
			uni.createSelectorQuery().in(this).select('#bottom-anchor').boundingClientRect(rect => {
				if (rect) {
					// rect.top 是 #bottom-anchor 相对于 scroll-view 顶部的距离
					// scroll-view 的 scrollTop 需要设置为这个距离减去 scroll-view 的高度，再加上 #bottom-anchor 自身的高度，使其刚好在底部
					// 或者简单地将 scrollTop 设置为一个非常大的值，让其滚动到底部
					this.scrollTop = this.messages.length * 200; // 估算一个足够大的值
				}
			}).exec();
		},
		handleVoiceInput() {
			uni.showToast({ title: '语音输入功能', icon: 'none' });
		},
		handleEmoji() {
			uni.showToast({ title: '表情功能', icon: 'none' });
		},
		handleMoreOptions() {
			uni.showToast({ title: '更多功能', icon: 'none' });
		},
		previewImage(imgUrl) {
			uni.previewImage({
				urls: [imgUrl],
				current: 0
			});
		},
		onInputFocus(e) {
			this.isInputFocused = true;
			// 如果键盘弹起，确保滚动到底部
			if (e.detail.height > 0) {
				this.$nextTick(() => {
					this.scrollToBottom(true);
				});
			}
		},
		onInputBlur() {
			this.isInputFocused = false;
		},

		buyNow() {
			// 在打开抽屉前，确保商品信息是最新的
			// const storedProduct = uni.getStorageSync('product');
			// if (storedProduct) {
			// 	this.chatInfo.product = { ...this.chatInfo.product, ...storedProduct };
			// }
			this.$refs.purchaseDrawer.open();
		},
		closePurchaseDrawer() {
			this.$refs.purchaseDrawer.close();
		},
		onDrawerChange(e) {
		},
		selectAddress() {
			// uni.navigateTo({ url: '/pages/user/AddressListPage?selectMode=true' });
			uni.navigateTo({
				url: '/pages/tb/my/addressList?isSelect=true' // 传递参数
			});
			// uni.showToast({ title: '选择收货地址', icon: 'none' });
		},
		previewOrder(orderId){
			uni.navigateTo({ url: '/pages/tb/order/order?id=' + orderId });
		},
		confirmPurchase() {
			if (!this.currentAddress) {
				this.selectAddress()
			}else{
				uni.showLoading({ title: '正在下单...' });
				app.globalData.Request.post(app.globalData.ApiConstant.Order.create, {
					productId: this.productId,
					addressId: this.addressId,
					shippingAddress: JSON.stringify(this.currentAddress)
				}).then((res)=>{
					if(res.success){
						// 模拟下单
						setTimeout(() => {
							uni.hideLoading();
							uni.showToast({ title: '下单成功！', icon: 'success' });
							this.closePurchaseDrawer();
							uni.navigateTo({ url: '/pages/tb/order/order?id=' + res.data.id });
						}, 1500);
					}else{
						uni.showToast({ title: res.msg, icon: 'error' });
					}	
				})
			}
			
		}
	}
};
</script>

<style lang="scss" scoped>
.chat-page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f4f4f4; // 聊天背景色
}

.chat-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15rpx 24rpx;
	background-color: #f4f4f4; // 与页面背景一致或 #fff
	border-bottom: 1rpx solid #e0e0e0;
	height: 88rpx; // 约等于原生导航栏高度
	box-sizing: border-box;
	position: sticky;
	top: 0;
	z-index: 100;

	.left-actions {
		display: flex;
		align-items: center;
		position: relative;
		.unread-count {
			position: absolute;
			top: -8rpx;
			left: 30rpx; // 根据返回箭头图标调整
			background-color: red;
			color: white;
			font-size: 20rpx;
			border-radius: 50%;
			padding: 2rpx 8rpx;
			min-width: 28rpx;
			height: 28rpx;
			text-align: center;
			line-height: 28rpx;
			box-sizing: border-box;
		}
	}

	.chat-title-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex-grow: 1;
		text-align: center;
		padding: 0 20rpx; // 给左右留空
		overflow: hidden;
		.chat-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 400rpx; // 限制最大宽度
		}
		.chat-subtitle {
			font-size: 22rpx;
			color: #888;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 400rpx;
		}
	}
}

.right-actions {
		min-width: 80rpx; // 保证右侧对齐
		display: flex;
		justify-content: flex-end;
		.buy-button {
			background-color: #ff5500;
			color: white;
			border-radius: 30rpx;
			padding: 0 20rpx;
			font-size: 24rpx;
			height: 50rpx;
			line-height: 50rpx;
			&::after {
				border: none;
			}
		}
	}

.product-info-card {
	display: flex;
	align-items: center;
	background-color: #fff;
	padding: 20rpx;
	margin: 0 24rpx 20rpx; // 与聊天内容区域的左右padding一致
	border-radius: 12rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
	position: sticky; // 使其在header下方，消息列表上方
	// top: 88rpx; // header的高度
	top: 10rpx; // header的高度
	z-index: 99;


	.product-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		background-color: #eee; // 占位
	}
	.product-details {
		flex-grow: 1;
		font-size: 24rpx;
		color: #666;
		.product-price {
			display: flex;
			align-items: baseline;
			margin-bottom: 8rpx;
			.price-symbol {
				font-size: 24rpx;
				color: #ff5000;
			}
			.price-value {
				font-size: 32rpx;
				font-weight: bold;
				color: #ff5000;
				margin-right: 10rpx;
			}
			.discount-tag {
				background-color: #fff0e6;
				color: #ff5000;
				padding: 2rpx 8rpx;
				border-radius: 4rpx;
				font-size: 20rpx;
			}
		}
		.product-shipping, .product-location {
			display: block;
			font-size: 22rpx;
			color: #999;
		}
	}
}


.message-list {
	flex: 1; // 占据剩余空间
	padding: 0 24rpx;
	box-sizing: border-box;
	// background-color: #f0f0f0;
	width: 100%; // 需要明确宽度
}

.loading-more {
	text-align: center;
	color: #999;
	font-size: 24rpx;
	padding: 20rpx 0;
}

.message-item-wrapper {
	margin-bottom: 30rpx;
}

.system-message {
	text-align: center;
	color: #999;
	font-size: 24rpx;
	padding: 10rpx 0;
}

.message-item {
	display: flex;
	align-items: flex-start; // 头像和气泡顶部对齐

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx; // 方形圆角头像
		background-color: #ccc; // 占位
	}

	.message-content {
		display: flex;
		flex-direction: column;
		max-width: calc(100% - 100rpx - 60rpx); // 减去头像宽度和一些间距
		position: relative;

		button {
			border-radius: 18px;
			font-size: 14px;
			padding: 0 18px;
			height: 36px;
			line-height: 36px;
			margin-left: 8px;
			&::after {
				border: none;
			}
		}

		.buy-now-btn {
			background-color: #FFE610; // 主题橙色
			font-weight: bold;
			color: black;
		}
	}
	
	.message-bubble {
		padding: 18rpx 24rpx;
		border-radius: 12rpx;
		font-size: 30rpx;
		line-height: 1.5;
		word-break: break-all; // 长单词或链接换行

		.message-image {
			max-width: 300rpx; // 图片消息最大宽度
			border-radius: 8rpx;
			display: block; // 避免图片下方空白
		}
	}
	
	.message-status {
		font-size: 22rpx;
		color: #999;
		margin-top: 8rpx;
	}

	&.sent {
		justify-content: flex-end;
		.message-content {
			align-items: flex-end; // 已读状态靠右
			margin-right: 20rpx;
		}
		.sent-bubble {
			background-color: #FFC800; // 发送者气泡颜色 (闲鱼黄)
			color: #333;
		}
	}

	&.received {
		justify-content: flex-start;
		.message-content {
			align-items: flex-start; // 接收到的消息内容靠左
			margin-left: 20rpx;
		}
		.received-bubble {
			background-color: #ffffff;
			color: #333;
		}
	}
}

#bottom-anchor {
	height: 1rpx; // 锚点，几乎不可见
}

.chat-input-area {
	display: flex;
	align-items: center;
	padding: 15rpx 20rpx;
	background-color: #f9f9f9;
	border-top: 1rpx solid #e0e0e0;
	box-sizing: border-box;

	.input-icon {
		margin: 0 10rpx;
		flex-shrink: 0;
	}

	.text-input {
		flex-grow: 1;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 15rpx 20rpx;
		font-size: 28rpx;
		min-height: 36rpx; // 保证input高度
		line-height: normal; // 保证文字垂直居中
		max-height: 150rpx; // 多行输入时最大高度
		overflow-y: auto; // 如果是textarea
	}
}



// --- 新增抽屉样式 ---
.purchase-drawer-content {
	background-color: #fff;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	padding: 24rpx 30rpx 0; // 底部由 bottom-bar 控制 padding
	box-sizing: border-box;

	.drawer-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		.seller-credit-tag {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #ff6a00; // 橙色
			.credit-icon {
				width: 36rpx; // 根据实际图标调整
				height: 36rpx;
				margin-right: 8rpx;
			}
		}
	}

	.drawer-product-info {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		.drawer-product-image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 12rpx;
			margin-right: 24rpx;
			background-color: #f0f0f0; // 占位
		}
		.drawer-product-details {
			display: flex;
			flex-direction: column;
			.drawer-product-name {
				font-size: 30rpx;
				color: #333;
				font-weight: 500;
				margin-bottom: 10rpx;
			}
			.drawer-product-price {
				font-size: 36rpx;
				color: #ff5000;
				font-weight: bold;
			}
		}
	}

	.drawer-address-section {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		background-color: #f9f9f9; // 轻微背景色
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;

		.location-icon {
			margin-right: 15rpx;
			flex-shrink: 0;
		}
		.address-details {
			flex-grow: 1;
			overflow: hidden;
			.address-text {
				display: block;
				font-size: 28rpx;
				color: #333;
				line-height: 1.4;
				margin-bottom: 8rpx;
				// 多行省略 (如果需要)
				// display: -webkit-box;
				// -webkit-box-orient: vertical;
				// -webkit-line-clamp: 2;
				// overflow: hidden;
				// text-overflow: ellipsis;
			}
			.address-contact {
				font-size: 24rpx;
				color: #999;
			}
		}
		uni-icons[type="right"] {
			margin-left: 10rpx;
			flex-shrink: 0;
		}
	}

	.drawer-shipping-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-top: 1rpx solid #f5f5f5;
		border-bottom: 1rpx solid #f5f5f5;
		margin-bottom: 20rpx; // 为底部按钮留出空间

		.shipping-label {
			font-size: 28rpx;
			color: #333;
		}
		.shipping-value {
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
		}
	}

	.drawer-bottom-bar {
		// position: sticky; // 如果抽屉内容可滚动，底部栏吸底
		// bottom: 0;
		// left: 0;
		// right: 0;
		// background-color: #fff;
		// padding: 20rpx 30rpx;
		width: calc(100% + 60rpx); // 撑满并覆盖父级padding
		margin-left: -30rpx;
		margin-right: -30rpx;

		.bottom-tip-banner {
			background-color: #fffbe8; // 淡黄色
			color: #8c531b;
			padding: 15rpx 30rpx;
			border-radius: 30rpx 30rpx 0 0; // 上部分圆角，模拟图中效果
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between; // 小鱼推到右边
			margin: 0 20rpx; // 左右留空，使圆角可见
			position: relative; // 为小鱼定位
			bottom: -1px; // 轻微重叠，覆盖分割线

			.tip-fish {
				height: 50rpx; // 根据实际图片调整
				width: auto;
			}
		}

		.confirm-purchase-btn {
			background-color: #ff5000;
			color: white;
			font-size: 32rpx;
			font-weight: bold;
			border-radius: 40rpx;
			height: 88rpx;
			line-height: 88rpx;
			margin: 20rpx 30rpx 0; // 与外部padding一致
			&::after {
				border: none;
			}
		}
		.safe-area-placeholder { // 专门给底部安全区留白
			height: 0; // 由js动态设置
		}
	}
}
</style>